<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加班审核</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7/css/bootstrap.css">

    <style>
        .el-pagination {

            margin-top: 15px;
            margin-left: 36%;
        }

        body {

            user-select: none;
        }

    </style>
</head>
<body>

<div id="app">

    <el-row type="flex" justify="center">

        <el-col :span="22">

            <el-table
                    :data="tableData"
                    style="width: 100%"
                    v-loading="loading"
                    @selection-change="multipleSelect"
            >

                <el-table-column
                        type="selection"
                        width="55px"
                        label="全选"
                        align="center"
                ></el-table-column>

                <el-table-column
                        type="index"
                        align="center"
                        width="55">
                </el-table-column>

                <el-table-column
                        label="申请人"
                        prop="userName"
                        column-key="name"
                        width="100px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="起始时间"
                        prop="startTime"
                        column-key="startTime"
                        width="200px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="结束时间"
                        prop="endTime"
                        width="200px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="时长"
                        prop="duration"
                        width="100px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="节假日"
                        prop="festival"
                        width="70px"
                        align="center"
                        show-overflow-tooltip
                >
                    <template slot-scope="scope">

                        <el-tag v-if="scope.row.festival === '1'" >是</el-tag>
                        <el-tag v-if="scope.row.festival === '2'" type="danger" >否</el-tag>

                    </template>

                </el-table-column>

                <el-table-column
                        label="申请时间"
                        prop="creatTime"
                        width="250px"
                        sortable
                        align="center"
                ></el-table-column>

                <el-table-column
                        label="申请内容"
                        prop="applyDesc"
                        width="100px"
                        align="center"

                >
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">

                            <p>
                                <el-tag>
                                    <i class="fa fa-user-md"></i>
                                    <span>姓名</span>
                                </el-tag>
                                {{ scope.row.userName }}
                            </p>

                            <p>
                                <el-tag>
                                    <i class="fa fa-commenting-o"></i>
                                    <span>备注</span>
                                </el-tag>
                                {{ scope.row.applyDesc }}
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" type="info">备注详情</el-tag>
                            </div>
                        </el-popover>
                    </template>

                </el-table-column>


                <el-table-column
                        label="状态"
                        prop="reviewStatus"
                        sortable
                        width="100px"
                        align="center"
                >

                    <template slot-scope="scope">

                        <el-tag type="warning">

                            <i class="fa fa-spinner fa-spin"></i> {{ scope.row.reviewStatus }}
                        </el-tag>


                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="200px"
                        align-="center"
                        align="center"
                >
                    <template slot-scope="scope">

                        <el-button size="small" type="primary" icon="el-icon-edit" round @click="submitReview(scope.row.applyId,'2')">
                            通过
                        </el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete-solid" round @click="submitReview(scope.row.applyId,'3')">
                            拒绝
                        </el-button>

                    </template>
                </el-table-column>


            </el-table>


            <el-button-group class="pull-right" v-if="selectList.length > 1">
                <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-edit"
                        round
                        @click='submitBatch("2")'
                >
                    批量通过
                </el-button>
                <el-button
                        size="small"
                        type="danger"
                        icon="el-icon-delete-solid"
                        round
                        @click='submitBatch("3")'
                >
                    批量拒绝</el-button>
            </el-button-group>

            <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :total=page.total
                    :current-page=page.current
                    :page-size=page.size
                    @current-change="handleCurrentChange"
                    v-if="showPagination"
            >
            </el-pagination>

        </el-col>


    </el-row>

</div>

</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            tableData: [],

            loading: true,

            selectList: [],

            showPagination: false,

            page: {

                total: 0,
                current: 1,
                size: 0

            }


        },


        methods: {

            //处理点击上/下一页
            handleCurrentChange: function (current) { //val为点击之后的页

                // $.ajax({
                //
                //     url: '/overtime/myReviewOvertimes',
                //     data: {'current': current},
                //     type: 'get',
                //
                //     beforeSend: function () {
                //
                //         app.loading = true
                //     },
                //     success: function (result) {
                //
                //         if (result.success === true) {
                //
                //             app.tableData = [];
                //             let resData = result.data;
                //
                //             for (let datas of resData.records) {
                //
                //                 datas.startTime = formatDate(datas.startTime);
                //                 datas.endTime = formatDate(datas.endTime);
                //                 datas.creatTime = formatDate(datas.creatTime);
                //
                //                 datas.reviewStatus = '待审核';
                //
                //                 app.tableData.push(datas);
                //
                //             }
                //
                //             app.page.total = resData.total;
                //             app.page.current = resData.current;
                //             app.page.size = resData.size;
                //
                //             app.loading = false
                //
                //         } else {
                //
                //             app.$notify.warning({
                //                 title: '警告',
                //                 message: result.msg
                //
                //             })
                //
                //         }
                //     }
                //
                // })
                getData(current);


            },

            /**
             * 多选是将ID放入selectList
             * @param select
             */
            multipleSelect: function (select) {

                this.selectList = [];

                for (let item of select) {

                    this.selectList.push(item.applyId);
                }

            },


            /**
             * 单个提交
             * @param id
             * @param status
             */
            submitReview: function (id, status) {

                $.ajax({

                    url: '/overtime/reviewone',
                    data: {
                        'reviewStatus': status,
                        'applyId': id
                    },
                    beforeSend: function () {

                        app.loading = true
                    },
                    success: function (result) {
                        app.loading = false;
                        if (result.success === true) {

                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            });

                            getData(app.page.current);


                        } else {

                            app.$notify.error({

                                title: '错误',
                                message: result.msg

                            })
                        }
                    }


                })

            },


            /**
             * 批量提交
             */
            submitBatch: function (status) {

                $.ajax({

                    url: '/reviewBatch',
                    data: {
                        'travelList': app.selectList
                    },
                    success: function (result) {

                        if (result === true) {
                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            });

                            getData(app.page.current);

                        } else {

                            app.$notify.error({

                                title: '错误',
                                message: result.msg

                            })
                        }

                    }

                })


            }


        },

        created: getData()


    })

// ====================================
    /**
     * 获取当前页面最新数据
     * @param current
     */
    function getData(current) {


        $.ajax({

            url: '/overtime/myReviewOvertimes',
            data: {'current': current},
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.tableData = [];
                    let resData = result.data;

                    for (let datas of resData.records) {

                        datas.startTime = formatDate(datas.startTime);
                        datas.endTime = formatDate(datas.endTime);
                        datas.creatTime = formatDate(datas.creatTime);

                        datas.reviewStatus = '待审核';

                        app.tableData.push(datas);

                    }

                    app.page.total = resData.total;
                    app.page.current = resData.current;
                    app.page.size = resData.size;

                    app.loading = false;

                    app.showPagination = true;


                } else {

                    app.$notify.warning({
                        title: '警告',
                        message: result.msg

                    })

                }
            }

        })


    };

    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();

        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;

        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second;

    }




</script>